<script setup lang="ts">
import { tabbarStore } from './tabbar'
// 'i-carbon-code',
import { tabbarList as _tabBarList, cacheTabbarEnable, selectedTabbarStrategy, TABBAR_MAP } from './tabbarList'

const customTabbarEnable
= selectedTabbarStrategy === TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE
  || selectedTabbarStrategy === TABBAR_MAP.CUSTOM_TABBAR_WITHOUT_CACHE

/** tabbarList 里面的 path 从 pages.config.ts 得到 */
const tabbarList = _tabBarList.map(item => ({ ...item, path: `/${item.pagePath}` }))
function selectTabBar({ value: index }: { value: number }) {
  const url = tabbarList[index].path
  tabbarStore.setCurIdx(index)
  if (cacheTabbarEnable) {
    uni.switchTab({ url })
  }
  else {
    uni.navigateTo({ url })
  }
}
function onChange(name: number) {
  console.log('onChange', name)
  selectTabBar({ value: name })
}
onLoad(() => {
  // 解决原生 tabBar 未隐藏导致有2个 tabBar 的问题
  const hideRedundantTabbarEnable = selectedTabbarStrategy === TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE
  hideRedundantTabbarEnable
  && uni.hideTabBar({
    fail(err) {
      console.log('hideTabBar fail: ', err)
    },
    success(res) {
      console.log('hideTabBar success: ', res)
    },
  })
})
</script>

<template>
  <sar-tabbar
    v-if="customTabbarEnable"
    v-model:current="tabbarStore.curIdx"
    bordered
    safe-area-inset-bottom
    placeholder
    fixed
    @change="onChange"
  >
    <block v-for="(item, idx) in tabbarList" :key="item.path">
      <sar-tabbar-item v-if="item.iconType === 'uiLib'" :name="idx" :text="item.text" :icon="item.icon" />
      <sar-tabbar-item
        v-else-if="item.iconType === 'unocss' || item.iconType === 'iconfont'"
        :name="idx"
        :text="item.text"
      >
        <template #icon>
          <view
            h-40rpx
            w-40rpx
            :class="[item.icon, idx === tabbarStore.curIdx ? 'is-active' : 'is-inactive']"
          />
        </template>
      </sar-tabbar-item>
      <sar-tabbar-item v-else-if="item.iconType === 'local'" :name="idx" :text="item.text">
        <template #icon>
          <image :src="item.icon" h-40rpx w-40rpx />
        </template>
      </sar-tabbar-item>
      <sar-tabbar-item v-else-if="item.iconType === 'center'" :name="idx">
        <view class="bulge">
          <view class="cover" />
          <view class="button">
            <sar-icon name="plus" size="96rpx" />
          </view>
        </view>
        <text class="text">{{ item.text }}</text>
      </sar-tabbar-item>
    </block>
  </sar-tabbar>
</template>

<style lang="scss" scoped>
.bulge {
  position: absolute;
  top: 0;
  transform-origin: top center;
  transform: scale(0.5) translateY(-33%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 192rpx;
  height: 192rpx;
  border-radius: 50%;
  background-color: var(--sar-tabbar-bg);
  box-shadow: inset 0 0 0 1px var(--sar-border-color);

  &:active {
    opacity: 0.8;
  }
}

.cover {
  position: absolute;
  top: 33%;
  width: 100%;
  height: 70%;
  transform: translateY(1px);
  background-color: var(--sar-tabbar-bg);
}

.button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 152rpx;
  height: 152rpx;
  border-radius: 50%;
  background-color: var(--sar-primary);
  color: var(--sar-white);
}

.text {
  position: relative;
  margin-top: auto;
  margin-bottom: 10rpx;
}
</style>
